<template>
    <div class="evalution" :style="{color: fontColor}">
       <v-header title="评价晒单" @back="back" :handleClick='true'>
         <p slot="right" @click="ifPublishRecommanded">发布</p>
         <!-- <x-icon @click="back"  slot="left" type="ios-arrow-left" size="28" style="top: 5px;" :style="{fill: fontColor}"></x-icon> -->
       </v-header>
      <div>
      <scroll :bounce="true" :style="{height: scrollHeight + 'px'}">
        <div>
          <!-- 商品标题部分 -->
          <flexbox class="topWrapper">
            <flexbox-item :span="1/4">
              <div class="flex-demo">
                <img :src="shoppingImage" alt="" class="imageTop">
              </div>
              </flexbox-item>
            <flexbox-item :span="3/4" class="rightWrapper">
              <div>
                <div class="flexTwo">
                  <p>商品评分</p>
                </div>
                <div class="felxStar">
                    <rater v-model="reconmmenderObject.rate" active-color="#FFA004"></rater>
                </div>
              </div>
            </flexbox-item>
          </flexbox>

            <!-- 评价文字部分 -->
            <divider>评价内容</divider>
            <div class="evlutionText">
              <x-textarea :max="200" placeholder="请亲愉快地描述评价吧" v-model="reconmmenderObject.comment"></x-textarea>
            </div>

            <!-- 上传照片视频部分 -->
            <grid :cols="3" class="gridWrapper">
              <input ref="selectImg" type="file" @change="selectImg" accept="image/*" multiple style="display: none;"/>
              <grid-item  class="gridItem">
                <div class="firstImage" @click="publishDynamic">
                   <img :src="photoImage">
                   <p class="photoText" @click.stop="handleName">
                     <check-icon :value.sync="agree">匿名上传</check-icon>
                   </p>
                </div>
              </grid-item>
              <grid-item v-for="(img, index) in atlas" :key="index" class="gridItem">
                 <v-touch ref="tapper" @press="press(index)" :press-options="{time: 1000}" @tap="clickImg(atlas, index)">
                    <div :style="{backgroundImage:`url(${img})`}" class="gridItemImage">
                    </div>
                  </v-touch>
              </grid-item>
            </grid>

            <!-- 是否推荐 -->
            <div class="recommededWrapper">
              <x-switch title="是否推荐" :value-map="[0, 1]" v-model="reconmmenderObject.recommend" @on-change="ifCommanded"></x-switch>
            </div>
          </div>

            <!-- 服务评价 -->
            <div class="serverin" v-if="goodsTypeTemp !== '201'">
              <flexbox class="topWrapper">
                  <flexbox-item>
                    <div class="flexServer">
                      <i class="fa fa-server" aria-hidden="true"></i><p>服务评价</p>
                    </div>
                    </flexbox-item>
                  <flexbox-item class="flexstar">
                    <div>
                      <p>满意请给五星哦</p>
                    </div>
                  </flexbox-item>
              </flexbox>
            </div>
            <hr class="hrline">

            <div v-if="goodsTypeTemp !== '201'">
              <flexbox class="topWrapper">
                  <flexbox-item>
                    <div class="flexServerevalution">
                      <p>环境</p>
                    </div>
                    </flexbox-item>
                  <flexbox-item class="flexstarmore">
                    <div>
                      <rater v-model="reconmmenderObject.environmentRate" class="rater" active-color="#FFA004"></rater>
                    </div>
                  </flexbox-item>
              </flexbox>
            </div>

            <div v-if="goodsTypeTemp !== '201'">
              <flexbox class="topWrapper">
                  <flexbox-item>
                    <div class="flexServerevalution">
                      <p>服务</p>
                    </div>
                    </flexbox-item>
                  <flexbox-item class="flexstarmore">
                    <div>
                      <rater v-model="reconmmenderObject.serviceRate" class="rater" active-color="#FFA004"></rater>
                    </div>
                  </flexbox-item>
              </flexbox>
            </div>

            <div v-if="goodsTypeTemp !== '201'">
              <flexbox class="topWrapper">
                  <flexbox-item>
                    <div class="flexServerevalution">
                      <p>设施</p>
                    </div>
                    </flexbox-item>
                  <flexbox-item class="flexstarmore">
                    <div>
                      <rater v-model="reconmmenderObject.facilityRate" class="rater" active-color="#FFA004"></rater>
                    </div>
                  </flexbox-item>
              </flexbox>
            </div>

            <div v-if="goodsTypeTemp !== '201'">
              <flexbox class="topWrapper">
                  <flexbox-item>
                    <div class="flexServerevalution">
                      <p>卫生</p>
                    </div>
                    </flexbox-item>
                  <flexbox-item class="flexstarmore">
                    <div>
                      <rater v-model="reconmmenderObject.sanitationRate" class="rater" active-color="#FFA004"></rater>
                    </div>
                  </flexbox-item>
              </flexbox>
            </div>
      </scroll>
      <div class="alertWrapperEvalution">
        <confirm v-model="show"
          title="温馨提示"
        @on-cancel="onCancel"
        @on-confirm="onConfirm">
            <p style="text-align:center;">是否确认发布</p>
        </confirm>
      </div>
      <!-- 图片阅览 -->
      <div>
          <previewer :list="selectAtlas" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
      </div>
    </div>
    <router-view/>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Previewer from '@/components/previewer/previewer'
import Scroll from '@/components/scroll/scroll'
import { Rater, Flexbox, FlexboxItem, XTextarea, Divider, CheckIcon, XSwitch, Confirm, Grid, GridItem } from 'vux'
import imageTop from '@/assets/img/default_avatar.png'
import photoImage from '@/assets/img/myhome/photo.png'
import uploadFile from '@/api/uploadFile'
import { localUser } from '@/assets/js/local'
import { mapMutations } from 'vuex'
import axios from '@/api/axiosApi'
export default {
  props: {
    fontColor: {
      type: String,
      default: '#fff'
    }
  },
  data () {
    return {
      photoImage: photoImage,
      scrollHeight: '500',
      imageTop: imageTop,
      agree: true,
      atlas: [],
      reconmmenderObject: {
        comment: '',
        environmentRate: 4,
        serviceRate: 4,
        facilityRate: 4,
        sanitationRate: 4,
        rate: 5
      },
      show: false,
      shoppingImage: '',
      selectAtlas: [],
      goodsTypeTemp: ''
    }
  },
  mounted () {
    this.scrollHeight = window.innerHeight - 64
  },
  computed: {
    imageSize () {
      return (window.innerWidth - 30) / 3 - 10
    }
  },
  created () {
    this.user = localUser.get()
    this.reconmmenderObject.recommend = 1
    this.shoppingImage = sessionStorage.getItem('goodsImageEvalution')
    this.goodsTypeTemp = sessionStorage.getItem('goodsType')
  },
  methods: {
    publishDynamic () {
      this.$refs.selectImg.dispatchEvent(new MouseEvent('click'))
    },
    selectImg (e) {
      if (e.target.files.length > 5) {
        this.$vux.toast.text('最多只能选5张图片', 'middle')
        return
      }
      uploadFile(this, e.target.files, (data) => {
        let temp = []
        data.forEach(item => {
          temp.push(item.downloadPath)
        })
        this.atlas = this.atlas.concat(temp)
        e.target.value = ''
      })
    },
    ifCommanded (value) {
      this.reconmmenderObject.recommend = value
    },
    // 是否确认发布
    ifPublishRecommanded () {
      if (this.reconmmenderObject.comment === '' || this.reconmmenderObject.comment == null) {
        this.$vux.toast.text('评论内容为空', 'middle')
        return
      }
      this.show = true
    },
    publishRecommanded () {
      this.reconmmenderObject.matchImgUrl = ''
      this.reconmmenderObject.userId = this.user.id
      if (this.goodsTypeTemp === '201') {
        this.reconmmenderObject.featureId = this.$route.params.productId
      } else {
        this.reconmmenderObject.productId = this.$route.params.productId
      }
      this.reconmmenderObject.outTradeNo = sessionStorage.getItem('outTradeNo')
      if (this.atlas.length > 0) {
        for (var i = 0; i < this.atlas.length; i++) {
          this.reconmmenderObject.matchImgUrl += this.atlas[i] + ';'
        }
      }
      if (this.agree) {
        this.reconmmenderObject.anonymity = 1
      } else {
        this.reconmmenderObject.anonymity = 0
      }
      if (this.goodsTypeTemp === '201') {
        axios.post(this, '/v1/featureRecord', this.reconmmenderObject, (data) => {
          this.$router.push(`/orderList?type=${this.goodsTypeTemp}`)
          this.$vux.toast.text('发布评论成功', 'middle')
        })
      } else {
        axios.post(this, '/v1/productComment', this.reconmmenderObject, (data) => {
          this.$router.push(`/orderList?type=${this.goodsTypeTemp}`)
          this.$vux.toast.text('发布评论成功', 'middle')
        })
      }
    },
    onCancel () {
    },
    onConfirm () {
      this.publishRecommanded()
    },
    handleName () {},
    // 预览图片
    clickImg (imgs, index) {
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      let temp = []
      imgs.forEach((img, i) => {
        temp.push({
          src: img
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    },
    press (index) {
      const _self = this
      this.$vux.confirm.show({
        title: '温馨提示',
        content: '确定删除此张照片吗',
        onCancel () {
        },
        onConfirm () {
          const index = _self.atlas.findIndex(o => o.index === index)
          _self.atlas.splice(index, 1)
        }
      })
    },
    back () {
      const _self = this
      if (_self.reconmmenderObject.comment !== '') {
        _self.$vux.confirm.show({
          title: '温馨提示',
          content: '编辑尚未完成，是否继续',
          onCancel () {
            _self.$router.go(-1)
          }
        })
      } else {
        _self.$router.go(-1)
      }
    }
  },
  components: {
    VHeader,
    Scroll,
    Rater,
    Flexbox,
    FlexboxItem,
    XTextarea,
    Divider,
    CheckIcon,
    XSwitch,
    Confirm,
    Grid,
    GridItem,
    Previewer,
    mapMutations
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.evalution {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height: 100%;
}

.topWrapper {
  padding-left 30px
  padding-top 7px
  padding-right 20px
  padding-bottom 5px
  background-color white
}

.topWrapperPhoto {
  border:1px solid #9bdf70;background:#f0fbeb
}

.flexTwo {
  margin-top -10px
  margin-left 5px
}

.rightWrapper {
  padding-left 10px
}
.imageTop {
  width 80px
  height 80px
}

.imageTops  {
  width 50px
  height 50px
}
.mainWrapper {
  background-color white
}

.felxStar {
  margin-top 5px
}

.evlutionText {
 background-color white
 color black
}

.photoWrapper {
  display flex
  margin-top 10px
  padding-top 10px
  padding-left 30px
  background-color white
}

.photoSmall {
  width 53px
  border:1px solid #DDDCD9;background:white
  padding-left 15px
  padding-top 7px
  padding-right 15px
  padding-bottom 0px
}

.photoText p {
  color $color-text-2
  margin-top -5px
  font-size 14px
  margin-left -3px
}

.nameWrapper {
  padding-bottom 10px
  margin-top 8px
  margin-left -5px
  p {
    font-size 14px
    line-height 20px
    margin-left 33px
    margin-top -21px
  }
}

.hrline {
  height:1px;border:none;solid #E4E4E4;
}

.flexServer p {
  margin-left 20px
  margin-top -26px
}

.flexstar {
  text-align right
}
.flexstar p {
  color $color-text-2
  font-size 14px
  margin-right 45px
}

.flexstarmore {
  text-align right
}

.rater {
  margin-right 40px
}

.serverin {
  margin-top 10px
}

.recommededWrapper {
  margin-top 10px
  background-color white
  padding-left 13px
  color black
}

.flexServerevalution p {
  color: black;
}

.flexTwo p {
  color: black;
}

.gridWrapper {
  background-color white
  .gridItem {
    text-align center
    .gridItemImage {
        margin 0 auto
        width 95px
        height 89px
        background-size: cover
        background-repeat: no-repeat
    }
    .firstImage {
      img {
        width 59px
        height 58px
      }
      .photoText {
        color: $color-text-2
        font-size $font-size-desc
      }
    }
  }
}
</style>
